<link href="{{URL::asset('js/bootstrap-tagsinput/bootstrap-tagsinput.css')}}" rel="stylesheet">
<style media="screen">
	.bootstrap-tagsinput .tag.label.label-info {
		font-size: 14px;
	}
</style>
<div class="row">
	<div class="col-md-12">
		<div class="box box-info">
			<div class="box-header with-border">
				<h3 class="box-title">{{trans("admin.".$PlanType['type']."_plan.header")}}</h3>
			</div>
		</div>

		<form class="form-horizontal" method="post">
			<div class="box-body" style="background:#FFF;margin-top:-20px">
				<div class="fields-group">
					@foreach($ReadOnly as $k => $r)
					<div class="form-group">
						<label class="col-sm-2 control-label">教材</label>
						<div class="col-sm-8">
							<div class="input-group">
								<span class="input-group-addon">
									<i class="fa fa-pencil fa-fw"></i>
								</span>
								<input type="text" name="reading{{$k}}" value="{{$r['title']}}" class="form-control" readonly>
							</div>
						</div>
					</div>
					@if($r['title'] == "A to Z")
					<div class="form-group">
						<label class="col-sm-2 control-label">请选择哪一册</label>
						<div class="col-sm-8">
							<div class="input-group">
								<span class="input-group-addon">
									<i class="fa fa-pencil fa-fw"></i>
								</span>
								<select id="sel_menu" name="reading{{$k}}_atoz" class="form-control">
								@foreach($Opts as $opt)
									<option value="{{$opt['title']}}">{{$opt['title']}}</option>
								@endforeach
								</select>
							</div>
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label">完成篇目数</label>
						<div class="col-sm-8">
							<div class="input-group">
								<span class="input-group-addon">
									<i class="fa fa-pencil fa-fw"></i>
								</span>
								<input type="number" name="reading{{$k}}_num" class="form-control input-num">
							</div>
						</div>
					</div>
					@else
					<div class="form-group">
						<label class="col-sm-2 control-label">篇目名称</label>
						<div class="col-sm-8">
							<div class="input-group">
								<span class="input-group-addon">
									<i class="fa fa-pencil fa-fw"></i>
								</span>
								<input id="chapters{{$k}}" class="form-control" name="reading{{$k}}_chapters" style="width:100%">
							</div>
						</div>
					</div>
					@endif


					@endforeach
					<div class="form-group">
						<label class="col-sm-2 control-label">本月班级阅读计划完成率</label>
						<div class="col-sm-8">
							<div class="input-group">
								<span class="input-group-addon">
									<i class="fa fa-pencil fa-fw"></i>
								</span>
								<input type="number" name="reading_percent" class="form-control input-percent">
								<span class="input-group-addon">
									<i class="fa fa-percent"></i>
								</span>
							</div>
						</div>
					</div>
				</div>
			</div>
			<input type="hidden" name="{{$PlanType['type']}}_count" value="{{sizeof($ReadOnly)}}">
		</form>
	</div>
</div>
<script src="{{URL::asset('js/bootstrap-tagsinput/bootstrap-tagsinput.min.js')}}"></script>
<script type="text/javascript">
$(function() {
	main.canSubmit = true;
	main.subText = "提交：请填写本月班级阅读计划完成率";

	// enter add tag
	$('#chapters0').tagsinput('add', 'some tag');
	$('#chapters1').tagsinput('add', 'some tag');
	$(".bootstrap-tagsinput").addClass('col-sm-12').find('input').addClass('form-control')
		.attr('placeholder', '输入后按enter或英文逗号');

	// selector
	$("#sel_menu").select2({
        placeholder: '请选择',
        allowClear: true,
		multiple:false,
    });

	// input number check
	$(".input-num").on("change",function() {
		if($(this).val() < 0){
			$(this).val(0);
		}
	})
	$(".input-percent").on("change",function() {
		if($(this).val() < 0){
			$(this).val(0);
		}
		if($(this).val() > 100){
			$(this).val(100);
		}
		if($(this).val() == ""){
			main.$notify.error({title:"Error",message:"请填写本月班级阅读计划完成率"});
			main.canSubmit = true;
			main.subText = "提交：请填写本月班级阅读计划完成率";
		}else{
			main.canSubmit = false;
			main.subText = "提交";
		}
	})
})
</script>
